<template>
  <ul class="container_ul" ref="foot">
    <li class="container-li_item" @click="setindex(1)"><img
      :src="this.index === 1 ? require('../assets/icon/loan-check.png') : require('../assets/icon/loan.png')" alt="">
      <p :style="{'color' :index === 1 ? '#196fe3' : '#666'}">借款</p></li>
    <li class="container-li_item" @click="setindex(2)"><img
      :src="this.index === 2 ? require('../assets/icon/repayment-check.png') : require('../assets/icon/repayment.png')"
      alt="">
      <p :style="{'color' :index === 2 ? '#196fe3' : '#666'}">还款</p></li>
    <li class="container-li_item" @click="setindex(3)"><img
      :src="this.index === 3 ? require('../assets/icon/MALL-check.png') : require('../assets/icon/Mall.png')" alt="">
      <p :style="{'color' :index === 3 ? '#196fe3' : '#666'}">商城</p></li>
    <li class="container-li_item container-li_item_check" @click="setindex(4)"><img
      :src="this.index === 4 ? require('../assets/icon/admin-check.png') : require('../assets/icon/admin.png')" alt="">
      <p :style="{'color' :index === 4 ? '#196fe3' : '#666'}">我的</p></li>
  </ul>
</template>

<script>
  export default {
    name: "foot",
    data() {
      return {
        index: 4,
      }
    },
    methods:{
      setindex(key){
        this.index=key;
        this.getCommit(key);
      },getCommit(key){
        if(this.index===1){
          this.$routes.push('/root/loan')
        }else if(this.index===2){
          this.$routes.push('/root/repayment')
        }else if(this.index===3){
          this.$routes.push('/root/Mall')
        }else if(this.index===4){
          this.$routes.push('/root/personal')
        }
  }
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container_ul {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 1.3333rem;
    background: #fff;
    z-index: 10;
  }

  .container_ul li {
    float: left;
    width: 25%;
    height: 1.3333rem;
    text-align: center;
    font-size: .16rem;
    color: #666;
  }

  .container-li_item_check p {
    color: #196fe3;
  }

  .container-li_item img {
    margin-top: .1rem;
    width: .6666rem;
    height: .6666rem;
  }
</style>
